var title_number_per_menu;
var image_number_per_tab;
var TITLE_NUMBER_PER_MENU = typeof(title_number_per_menu) == "undefined" ?
		10 : title_number_per_menu;
var IMAGE_NUMBER_PER_TAB  = typeof(image_number_per_tab) == "undefined" ?
		30 : image_number_per_tab;
var emoData;

//Initialize  all buttons and images.
function init() {
	var body = document.getElementsByTagName('body').item(0);
	var emoticonData;
	if(typeof(emoData) == "undefined")
		emoticonData = getEmoticonData();
	else 
		emoticonData = emoData;
	addContainer(emoticonData.length);
	
	var tabIdx = -1;
	for(var sdc=0; sdc<emoticonData.length; sdc++) {
		var emoticonRecord = emoticonData[sdc];
		var titleDiv = document.getElementById('m' + Math.floor(sdc/TITLE_NUMBER_PER_MENU));
		tabIdx++;

		var tabTd = document.createElement('td');
		var tab = document.createElement('div');
		tabTd.appendChild(tab);
		var divName = 't' + tabIdx;
		tab.innerHTML = emoticonRecord[0]+'&nbsp;';
		tab.className = 'titleText';
		//tab.className = 'toolstrip-button';
		tab.setAttribute('onClick', 'handleFolderClick(\''+divName+'\',\'allImageFolder\')');
		titleDiv.appendChild(tabTd);

		var baseThbURL = emoticonRecord[1];
		var baseEmoURL = emoticonRecord[2];
		var tabDiv = document.createElement('div');
		var imageURLdata = emoticonRecord[3];
		tabDiv.id = divName;
		tabDiv.setAttribute('name', 'allImageFolder');
		tabDiv.style.display = 'none';
		if(imageURLdata.length>IMAGE_NUMBER_PER_TAB) {
			var imageFolderCount = Math.ceil(imageURLdata.length/IMAGE_NUMBER_PER_TAB);
			for(var mc=0; mc<imageFolderCount; mc++) {
				var imgDiv = document.createElement('div');
				imgDiv.innerHTML = mc+1;
				imgDiv.className = 'toolstrip-button';
				imgDiv.setAttribute('onClick', 'handleFolderClick(\''+divName+'i'+mc+'\', '+'\''+divName +'ImageFolder\''+')');
				tabDiv.appendChild(imgDiv);
			}
			for(var cmc=0; cmc<imageFolderCount; cmc++) {
				var imgFolderDiv = document.createElement('div');
				imgFolderDiv.id = divName+'i'+cmc;
				if(cmc!=0) imgFolderDiv.style.display = 'none';
				imgFolderDiv.setAttribute('name', divName+'ImageFolder');
				tabDiv.appendChild(imgFolderDiv);
				
				var upBoundOfImages;
				if (imageURLdata.length > (cmc+1)*IMAGE_NUMBER_PER_TAB) {
					upBoundOfImages = (cmc+1)*IMAGE_NUMBER_PER_TAB;
				} else {
					upBoundOfImages = imageURLdata.length;
				}
				for(var imgc=cmc*IMAGE_NUMBER_PER_TAB; imgc<upBoundOfImages; imgc++){
					var imageParent = document.getElementById(divName + 'i' 
						+ Math.floor(imgc/IMAGE_NUMBER_PER_TAB));
					var imageURL = imageURLdata[imgc];
					var img = document.createElement('img');
					imgFolderDiv.appendChild(img);
					img.src = baseThbURL + imageURL;
					img.className = 'imgBtn';
					img.setAttribute('data', baseThbURL + imageURL);
					img.setAttribute('onClick', 'handleEmoticonClick(\''+baseEmoURL+imageURL+'\')');
				}
			}
		} else {
			for(var imgc=0; imgc<imageURLdata.length; imgc++){
				var imageURL = imageURLdata[imgc];
				var img = document.createElement('img');
				tabDiv.appendChild(img);
				img.src = baseThbURL + imageURL;
				img.className = 'imgBtn';
				img.setAttribute('data', baseThbURL + imageURL);
				img.setAttribute('onClick', 'handleEmoticonClick(\''+baseEmoURL+imageURL +'\')');
			}
		}
		body.appendChild(tabDiv);
	}
	handleAppIconClick();
}
//Handler of expand/collapse image folders
//Give name to hide all elements named in name
function handleFolderClick(container, name) {
	var visiable = document.getElementById(container).style.display;
	if(visiable == 'none') {
		if(name) {
			var elements = document.getElementsByName(name);
			for(var elmc=0;elmc<elements.length;elmc++) {
				elements[elmc].style.display = 'none';
			}
		}
		document.getElementById(container).style.display = '';
	} else
		;//document.getElementById(container).style.display = 'none';
}
function handleEmoticonClick(imageURL){
	chrome.tabs.executeScript(
		null, 
		{code:setExecCode(imageURL)}, 
		callBakeFunc);
}
//
function handleAppIconClick() {
	var html = document.getElementsByTagName('html').item(0);
	var menu = document.getElementById('menu');
	if(menu.style.display == 'none') {
		html.className = 'htmlExpand';
		menu.style.display = '';
	} else {
		html.className = 'htmlCollapse';
		menu.style.display = 'none';
	}
}

//The code string excute inside chrome tab.
function setExecCode(imgURL) {
    var execCode =" \
    var focusObj; \
    if(document.getElementById('form_holder')){ \
    	if(document.getElementById('form_holder').style.display == 'none') { \
    		focusObj = document.getElementById('input_big'); \
    	} else { \
    		 focusObj = document.getElementById('input_small'); \
    	} \
    } else { \
		focusObj = document.activeElement; \
    } \
	var selectedStart = focusObj.selectionStart; \
	var selectedEnd = focusObj.selectionEnd; \
	var newText = '"+imgURL+"'; \
	focusObj.value = focusObj.value.substring(0,selectedStart) \
		+ newText \
		+focusObj.value.substring(selectedEnd,focusObj.value.length); \
	focusObj.setSelectionRange( \
		selectedStart, \
		selectedStart + newText.length \
		);";
	return execCode;
}

function callBakeFunc() {
	console.log("[callBakeFunc]");
}

function addContainer(tcount) {
	var menuFolderCount = Math.ceil(tcount/TITLE_NUMBER_PER_MENU);
	for(var mc=0; mc<menuFolderCount; mc++) {
		var menuDiv = document.createElement('div');
		menuDiv.innerHTML = (mc+1);
		menuDiv.className = 'toolstrip-button';
		menuDiv.setAttribute('onClick', 'handleFolderClick(\'m'+mc+'\', '+'\'menuFolder\''+')');
		document.getElementById('menu').appendChild(menuDiv);
	}
	
	var menuTable = document.createElement('table');
	menuTable.className = 'titleBar';
	for(var cmc=0; cmc<menuFolderCount; cmc++) {
		var menuFolderElement = document.createElement('tr');
		menuFolderElement.id = 'm'+cmc;
		if(cmc!=0) menuFolderElement.style.display = 'none';
		menuFolderElement.setAttribute('name', 'menuFolder');
		menuTable.appendChild(menuFolderElement);
	}
	document.getElementById('menu').appendChild(menuTable);
}

function getEmoticonData() {
	var emoData = [];

emoData.push([
	'悠嘻猴','thumbnails/monkey/',
	'http://cichikung.myweb.hinet.net/plurk/monkey/',
	['m001.gif','m002.gif','m003.gif','m004.gif','m005.gif',
	 'm006.gif','m007.gif','m008.gif','m009.gif','m010.gif',
	 'm011.gif','m012.gif','m013.gif','m014.gif','m015.gif',
	 'm016.gif','m017.gif','m018.gif','m019.gif','m020.gif',
	 'm021.gif','m022.gif','m023.gif','m024.gif','m025.gif',
	 'm026.gif','m027.gif','m028.gif','m029.gif','m030.gif',
	 'm031.gif','m032.gif','m033.gif','m034.gif','m035.gif',
	 'm036.gif','m037.gif','m038.gif','m039.gif','m040.gif',
	 'm041.gif','m042.gif','m043.gif','m044.gif','m045.gif',
	 'm046.gif','m047.gif','m048.gif','m049.gif','m050.gif',
	 'm051.gif','m052.gif','m053.gif','m054.gif','m055.gif',
	 'm056.gif','m057.gif','m058.gif','m059.gif','m060.gif',
	 'm061.gif','m062.gif','m063.gif','m064.gif','m065.gif',
	 'm066.gif','m067.gif','m068.gif','m069.gif','m070.gif',
	 'm071.gif','m072.gif','m073.gif','m074.gif','m075.gif',
	 'm076.gif','m077.gif','m078.gif','m079.gif','m080.gif',
	 'm081.gif','m082.gif','m083.gif','m084.gif','m085.gif',
	 'm086.gif','m087.gif','m088.gif','m089.gif','m090.gif',
	 'm091.gif','m092.gif','m093.gif','m094.gif','m095.gif',
	 'm096.gif','m097.gif','m098.gif','m099.gif','m100.gif',
	 'm101.gif','m102.gif','m103.gif','m104.gif','m105.gif',
	 'm106.gif','m107.gif','m108.gif','m109.gif','m110.gif',
	 'm111.gif','m112.gif','m113.gif','m114.gif','m115.gif',
	 'm116.gif','m117.gif','m118.gif','m119.gif','m120.gif',
	 'm121.gif','m122.gif','m123.gif','m124.gif','m125.gif',
	 'm126.gif','m127.gif','m128.gif','m129.gif','m130.gif',
	 'm131.gif','m132.gif','m133.gif','m134.gif','m135.gif',
	 'm136.gif','m137.gif','m138.gif','m139.gif','m140.gif',
	 'm141.gif','m142.gif','m143.gif','m144.gif','m145.gif',
	 'm146.gif','m147.gif','m148.gif','m149.gif','m150.gif',
	 'm151.gif','m152.gif','m153.gif','m154.gif','m155.gif',
	 'm156.gif','m157.gif','m158.gif','m159.gif','m160.gif',
	 'm161.gif','m162.gif','m163.gif','m164.gif','m165.gif',
	 'm166.gif','m167.gif','m168.gif','m169.gif','m170.gif',
	 'm171.gif','m172.gif','m173.gif','m174.gif','m175.gif',
	 'm176.gif','m177.gif','m178.gif','m179.gif','m180.gif',
	 'm181.gif','m182.gif','m183.gif','m184.gif','m185.gif',
	 'm186.gif','m187.gif','m188.gif','m189.gif','m190.gif',
	 'm191.gif','m192.gif','m193.gif','m194.gif','m195.gif',
	 'm196.gif','m197.gif','m198.gif','m199.gif','m200.gif',
	 'm201.gif','m202.gif','m203.gif','m204.gif','m205.gif',
	 'm206.gif','m207.gif','m208.gif','m209.gif','m210.gif',
	 'm211.gif','m212.gif','m213.gif','m214.gif','m215.gif',
	 'm216.gif','m217.gif','m218.gif','m219.gif','m220.gif',
	 'm221.gif','m222.gif']
]);

	return emoData;
}